<template>
  <div>
    <el-container>
      <el-header class="header-container">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo header-content"
            mode="horizontal"
            background-color="#3385D9"
            text-color="#fff"
            active-text-color="#FFD252"
        >
          <el-menu-item index="0" @click="handleSelect">
            <img width="50px" src="https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/student_System_img/logo1.png" alt="logo">
            <span class="system-name">学校综合服务管理系统</span>
          </el-menu-item>

          <el-menu-item index="/login" @click="handleSelect">
            <el-icon :size="40">
              <ElementPlus/>
            </el-icon>
          </el-menu-item>

          <el-menu-item index="/main" @click="handleSelect">
            <el-icon :size="40">
              <House/>
            </el-icon>
          </el-menu-item>

          <el-menu-item index="/ai" @click="handleSelect">
            <el-icon :size="40">
              <Service/>
            </el-icon>
          </el-menu-item>

          <el-menu-item index="/weather" @click="handleSelect">
            <el-icon :size="40">
              <PartlyCloudy/>
            </el-icon>
          </el-menu-item>

          <div class="flex-grow" />

          <el-sub-menu index="1" >
            <template #title>用户操作</template>
            <el-menu-item index="1-1" @click="changeUser">切换用户</el-menu-item>
            <el-menu-item index="1-2" @click="logout">退出登录</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>
    </el-container>

  </div>
</template>
<script setup>
import { ref } from 'vue'
import {ElementPlus,House,Service,PartlyCloudy} from "@element-plus/icons-vue/global";
import router from "@/router/index.js";
import {ElMessageBox, ElNotification} from "element-plus";
import {delStorage, getStorage} from "@/utils/localStorage.js";

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (event) => {
  router.push(event.index.toString())
}
const changeUser = () => {
  ElMessageBox.confirm(
      '请问您是否要切换用户',
      '切换用户',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }
  ).then(() => {
    if(getStorage('Token') === null){
      ElNotification({
        title: '提示',
        message: '用户未登录',
        type: 'warning',
      })
    }
    router.push('/login')
  }).catch(() => {
    console.log("用户取消操作")
  })
}

const logout = () => {
  ElMessageBox.confirm(
      '请问您是否要退出登录',
      '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
        //执行登出
    ElNotification({
      title: '提示',
      message: '退出登录成功',
      type: 'warning',
    })
    //2.清除浏览器保存的用户信息
    delStorage("userInfo");
    delStorage("Token");
    delStorage("appEntryList")
    router.push('/login')
  }).catch(() => {
    console.log("用户取消操作")
  })

}
</script>
<style scoped>
.flex-grow {
  flex-grow: 1;
}
.header-container{
  z-index: 100;
  position: fixed;
  padding: 0;
  width: 100%;
}
.header-content{
  margin: 0;
  padding: 0;
  height: 50px;
}
.system-name{
  padding: 0;
  margin-left: 10px;
  color: white;
  font-size: 15px;
  letter-spacing: 3px;
  text-align: center;
}
</style>
